<template></template>

<script setup>
import { inject, onMounted, onBeforeUnmount } from 'vue';
import { CityBuildingLayer, LineLayer, LayerSwitch } from '@antv/l7';
import { getWuhanBuildinds, getWuhanRoads } from '../api';

const { map, scene } = inject('map');
let buildingsLayer, roadsLayer, layerSwitch;

onMounted(async () => {
  // 调整地图视图
  map.flyTo({
    center: [114.4063, 30.465113],
    zoom: 15,
    pitch: 45,
  });

  // 获取建筑数据
  const buildingData = (await getWuhanBuildinds()).data;
  // console.log(buildingData);
  // 获取道路数据
  const roadData = (await getWuhanRoads()).data;
  // console.log(roadData);

  // 创建建筑层,
  buildingsLayer = new CityBuildingLayer({
    name: '建筑', //自定义图层名称
  })
    .source(buildingData)
    .size('Elevation', height => height)
    .filter('Elevation', height => height > 10)
    .color('rgb(240, 240, 240)')
    .animate(true) // 开启动画效果
    .active(true) //开启默认高亮效果
    .style({
      opacity: 0.8, // 透明度
      baseColor: 'rgb(16, 16, 16)', // 楼房颜色,
      windowColor: 'rgb(30, 60, 89)', // 窗口颜色
      brightColor: 'rgb(255, 176, 38)', // 点亮窗户颜色
      //圆形扫光扩散动画相关配置项
      sweep: {
        enable: true, // 开启扫光扩散
        sweepRadius: 2, // 扫光扩散半径
        sweepColor: '#1990FF', // 扫光颜色
        sweepSpeed: 0.5, // 扫光速度
        sweepCenter: [114.406325, 30.465113], // 扫光中心点坐标
      },
    });

  roadsLayer = new LineLayer({
    name: '道路', //自定义图层名称
  })
    .source(roadData)
    .shape('line')
    .color('type', type => {
      switch (type) {
        case 'motorway':
          return '#F9D371';
        case 'motorway_link':
          return '#3DB2FF';
        case 'trunk':
          return 'green';
        case 'trunk_link':
          return '#6E85B2';
        case 'primary':
          return '#F47340';
        case 'primary_link':
          return '#F6A9A9';
        case 'secondary':
          return '#EF2F88';
        case 'secondary_link':
          return '#5F7A61';
        case 'tertiary':
          return '#1ee3cf';
        case 'tertiary_link':
          return '#C2F784';
        case 'pedestrian':
          return '#FFF89A';
        case 'residential':
          return 'rgba(22, 119, 255, .5)';
        case 'road':
          return '#93FFD8';
        case 'path':
          return '#BAFFB4';
        case 'unclassified':
          return '#D3DEDC';
        case 'service':
          return '#AEFEFF';
        case 'living_street':
          return '#9B0000';
        case 'track':
          return '#F5F5F5';
        case 'highway':
          return 'red';
        case 'rail':
          return '#08ffc8';
        default:
          return '#FFE3E3';
      }
    })
    .size(1)
    .active(true)
    .style({ opacity: 0.5 })
    .animate({
      interval: 1, // 轨迹间隔, 取值区间 0 - 1
      duration: 1, // 动画时长
      trailLength: 1, //轨迹长度 取值区间 0 - 1
    });
  // 将建筑层添加到场景中
  scene.addLayer(buildingsLayer);
  // 将道路层添加到场景中
  scene.addLayer(roadsLayer);
  // 创建图层切换控件
  layerSwitch = new LayerSwitch({
    layers: [buildingsLayer, roadsLayer],
  });
  scene.addControl(layerSwitch);
});

onBeforeUnmount(() => {
  if (buildingsLayer) {
    // 移除建筑层
    scene.removeLayer(buildingsLayer);
  }
  if (roadsLayer) {
    // 移除道路层
    scene.removeLayer(roadsLayer);
  }
  if (layerSwitch) {
    // 移除图层切换控件
    scene.removeControl(layerSwitch);
  }
});
</script>

<style scoped></style>
